<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/classify.css" />
		<link rel="stylesheet" href="css/goods.css" />
		<link rel="stylesheet" href="font/iconfont.css" />
	</head>
	<body>
		<!-- 头部 -->
		<header>
			<!-- 中间版心宽度导航 -->
			<div class="header">
				<!-- 左边 -->
				<a class="logo" href="index.html" ></a>
				
				<!-- 右边 -->
				<ul class="nav-r">
					<li class="login"><a href="">登录</a></li>
					<li class="register"><a href="">注册</a></li>
					<li class="nav-line">|</li>
					
					<!-- 购物车 -->
					<li class="cart">
						<p>购物车</p>
						<!-- 购物车子菜单 -->
						<div class="cart-subnav">
							<!-- 购物车内容 -->
							<!-- 暂无商品, 没有商品，没有登录 -->
							<!-- <div class="cart-msg">你的购物车暂无商品...</div> -->
							<!-- 中间购物车商品 -->
							<ul class="cart-list">
								<li class="goods">
									<a href=""><img src="img/goods.jpg" alt="" /></a>
									<div>
										<p>全棉插肩长袖T恤 | 百</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：3件</span>
											<span>¥290.00</span>
											<span>¥390.00</span>
										</p>
									</div>
								</li>
								<li class="goods">
									<a href=""><img src="img/goods.jpg" alt="" /></a>
									<div>
										<p>全棉插肩长袖T恤 | 百</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：3件</span>
											<span>¥290.00</span>
											<span>¥390.00</span>
										</p>
									</div>
								</li>
								<li class="goods">
									<a href=""><img src="img/goods.jpg" alt="" /></a>
									<div>
										<p>全棉插肩长袖T恤 | 百</p>
										<p>服装尺码:S;颜色:米白/黑;</p>
										<p>
											<span>数量：3件</span>
											<span>¥290.00</span>
											<span>¥390.00</span>
										</p>
									</div>
								</li>
							</ul>
							
							<!-- 下方按钮，跳转功能 -->
							<!-- 未登录 无购物车信息 -->
							<!-- <div class="cart-btn">快去抢购物良仓商品吧！</div> -->
							<!-- 登陆了 -->
							<div class="cart-btn">查看购物车</div>
						</div>
						
						
						
					</li>
					
					<li class="nav-line">|</li>
					
					<!-- 消息 -->
					<li class="message">
						<p>消息</p>
						<!-- 消息子菜单 -->
						<div class="message-subnav">
							<ul class="message-list">
								<li><a href="">动态</a><span>0</span></li>
								<li><a href="">评论</a><span>0</span></li>
								<li><a href="">私信</a><span>0</span></li>
								<li><a href="">粉丝</a><span>0</span></li>
								<li><a href="">喜欢</a><span>0</span></li>
								<li><a href="">通知</a><span>0</span></li>
							</ul>
							
						</div>
					</li>
					
					<li class="nav-line">|</li>
					<li class="add-product"><a href="">添加良品</a></li>
					<li class="agreement"><a href="">资质证照/协议规则</a></li>
				</ul>
			</div>
		</header>
		
		<!-- 导航 -->
		<nav>
			<ul>
				<li><a href="">首页</a></li>
				<li>
					<a href="">商店</a>
					<!-- 商店子菜单 -->
					<div class="nav-subnav">
						<!-- 商店子菜单 左边 -->
						<ul class="nav-subnav-left">
							<li>
								<a href=""><img src="img/nav_icon1.png" alt="" /></a>
								<p>家居</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon2.png" alt="" /></a>
								<p>文具</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon3.png" alt="" /></a>
								<p>数码</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon4.png" alt="" /></a>
								<p>玩乐</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon5.png" alt="" /></a>
								<p>餐厨</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon6.png" alt="" /></a>
								<p>美食</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon7.png" alt="" /></a>
								<p>服装</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon8.png" alt="" /></a>
								<p>鞋包</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon9.png" alt="" /></a>
								<p>配饰</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon10.png" alt="" /></a>
								<p>美护</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon11.png" alt="" /></a>
								<p>出行</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon12.png" alt="" /></a>
								<p>图书</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon13.png" alt="" /></a>
								<p>艺术</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon14.png" alt="" /></a>
								<p>水具</p>
							</li>
							<li>
								<a href=""><img src="img/nav_icon15.png" alt="" /></a>
								<p>运动</p>
							</li>
							
						</ul>
						<!-- 商店子菜单 右边 -->
						<div class="nav-subnav-right">
							<img src="img/nav_banner.jpg" alt="" />
							<p>新视线：  2024年12月刊</p>
						</div>
					</div>
				</li>
				<li>
					<a href="">杂志</a>
					<!-- 杂志子菜单 -->
					<div class="magazine-list">
						<ul>
							<li><a href="">趣物</a></li>
							<li><a href="">数码</a></li>
							<li><a href="">汽车</a></li>
							<li><a href="">文化</a></li>
							<li><a href="">时尚</a></li>
							<li><a href="">美食</a></li>
							<li><a href="">建筑</a></li>
							<li><a href="">空间</a></li>
							<li><a href="">圈子</a></li>
							<li><a href="">清单</a></li>
							<li><a href="">活动</a></li>
							<li><a href="">视频</a></li>
						</ul>
					</div>
				</li>
				
				<li>
					<a href="">分享</a>
					<!-- 分享子菜单 -->
					<div class="share-list">
						<ul>
							<li><a href="">男士</a></li>
							<li><a href="">家居</a></li>
							<li><a href="">数码</a></li>
							<li><a href="">工具</a></li>
							<li><a href="">玩具</a></li>
							<li><a href="">美容</a></li>
							<li><a href="">孩子</a></li>
							<li><a href="">宠物</a></li>
							<li><a href="">饮食</a></li>
							<li><a href="">运动</a></li>
							<li><a href="">文化</a></li>
							<li><a href="">女士</a></li>
						</ul>
					</div>
				</li>
				
				<li><a href="">达人</a></li>
				<li><a href="">有偿资讯</a></li>
			</ul>
			
			<div class="search-content">
				<input type="text" placeholder="search..." name="" id="">
				<span></span>
			</div>
		</nav>
		
		<!-- 面包屑导航栏 -->
		<div class="breadcrumb-content">
			<a href="index.html">良仓</a><span>&gt;</span>
			<a href="index.html">商店</a><span>&gt;</span>
			<a href="" class="now-breadcrumb">文具</a>
			
		</div>
		
		<!-- 分类导航 -->
		<div class="nav-list">
			<!-- 分类导航 左边-->
			<div class="nav-list-left">
				<ul>
					<li><a href="">新品</a></li>
					<li><a href="">家居</a></li>
					<li><a href="">文具</a></li>
					<li><a href="">数码</a></li>
					<li><a href="">玩乐</a></li>
					<li><a href="">餐厨</a></li>
					<li><a href="">美食</a></li>
					<li><a href="">服装</a></li>
					<li><a href="">鞋包</a></li>
					<li><a href="">配饰</a></li>
					<li><a href="">美护</a></li>
					<li><a href="">出行</a></li>
					<li><a href="">图书</a></li>
					<li><a href="">艺术</a></li>
					<li><a href="">水具</a></li>
					<li><a href="">运动</a></li>
				</ul>
			</div>
			
			<!-- 分类导航 右边-->
			<div class="nav-list-right">
				<select>
					<option>价格筛选：全部</option>
					<option>价格筛选：0-300</option>
					<option>价格筛选：301-1000</option>
					<option>价格筛选：1001-10000</option>
					<option>价格筛选：10000以上</option>
				</select>
			</div>
		</div>
				
		
		<!-- 商品列表 == 人气商品和分类商品 -->
		<ul class="base-goods-content">
			<li class="base-goods">
				<!-- 上面商品 -->
				<div class="goods-up">
					<img src="img/goods1.jpg" alt="" />			
					<a href="" class="goods-mask">
						<p>¥440.00</p>
						<p>Buds Pro 2耳机 | 无线主动降噪 重低音</p>
						<p>可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制</p>
					</a>
				</div>
				<!-- 下面的品牌 -->
				<div class="brand-down">
					<div>
						<img src="img/brand.jpg" alt="" />
						<span>成万万</span>
					</div>
					<div>
						<span>2</span>
						<span class="iconfont icon-aixin_shixin"></span>
					</div>			
				</div>
			</li>
			<li class="base-goods">
				<!-- 上面商品 -->
				<div class="goods-up">
					<img src="img/goods1.jpg" alt="" />			
					<a href="" class="goods-mask">
						<p>¥440.00</p>
						<p>Buds Pro 2耳机 | 无线主动降噪 重低音</p>
						<p>可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制</p>
					</a>
				</div>
				<!-- 下面的品牌 -->
				<div class="brand-down">
					<div>
						<img src="img/brand.jpg" alt="" />
						<span>成万万</span>
					</div>
					<div>
						<span>2</span>
						<span class="iconfont icon-aixin_shixin"></span>
					</div>			
				</div>
			</li>
			
			<li class="base-goods">
				<!-- 上面商品 -->
				<div class="goods-up">
					<img src="img/goods1.jpg" alt="" />			
					<a href="" class="goods-mask">
						<p>¥440.00</p>
						<p>Buds Pro 2耳机 | 无线主动降噪 重低音</p>
						<p>可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制</p>
					</a>
				</div>
				<!-- 下面的品牌 -->
				<div class="brand-down">
					<div>
						<img src="img/brand.jpg" alt="" />
						<span>成万万</span>
					</div>
					<div>
						<span>2</span>
						<span class="iconfont icon-aixin_shixin"></span>
					</div>			
				</div>
			</li>
			
			<li class="base-goods">
				<!-- 上面商品 -->
				<div class="goods-up">
					<img src="img/goods1.jpg" alt="" />			
					<a href="" class="goods-mask">
						<p>¥440.00</p>
						<p>Buds Pro 2耳机 | 无线主动降噪 重低音</p>
						<p>可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制可定制智能按钮，快速实现降噪和声音控制</p>
					</a>
				</div>
				<!-- 下面的品牌 -->
				<div class="brand-down">
					<div>
						<img src="img/brand.jpg" alt="" />
						<span>成万万</span>
					</div>
					<div>
						<span>2</span>
						<span class="iconfont icon-aixin_shixin"></span>
					</div>			
				</div>
			</li>
		</ul>
		
		
		<!-- 底部 -->
		<div class="server-content">
			<!-- 版心宽度 -->
			<div class="bottom-server">
				<span class="iconfont icon-shouzhi"></span>
				<a href="">良仓商品 / OUR SHOP</a>
				
				<div class="bottom-img">
					<ul>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img1"></div>
								<div><p>全球精品</p><p>Global Selections</p></div>
							</div>
						</li>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img2"></div>
								<div><p>正品保证</p><p>Authenticity Guaranteed</p></div>
							</div>
						</li>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img3"></div>
								<div><p>全场包邮</p><p>Free Delivery</p></div>
							</div>
						</li>
						<li>
							<div class="bottom-img-list">
								<div class="bottom-img4"></div>
								<div><p>客服邮箱</p><p>kefu@iliangcang.com</p></div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- 返回顶部按钮 -->
		<div class="back-top"></div>
		
		<!-- 弹出框 -->
		<div class="alert-msg">
			<div class="alert-content">
				内容
			</div>
		</div>
		
	</body>
</html>